
<style scoped>
.el-row {
	margin-bottom: 20px;
}

.grid-content {
	display: flex;
	align-items: center;
	height: 100px;
}

.grid-cont-right {
	flex: 1;
	text-align: center;
	font-size: 12px;
	color: #999;
}

.grid-num {
	font-size: 30px;
	font-weight: bold;
}
.num_left {
	font-size: 20px;
}
.grid-con-icon {
	font-size: 50px;
	width: 100px;
	height: 100px;
	text-align: center;
	line-height: 100px;
	color: #fff;
}

.grid-con-1 .grid-con-icon {
	background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
	color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
	background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
	color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
	background: rgb(87, 72, 70);
}

.grid-con-3 .grid-num {
	color: rgb(242, 94, 67);
}

.user-info {
	display: flex;
	align-items: center;
	padding-bottom: 20px;
	border-bottom: 2px solid #ccc;
	margin-bottom: 20px;
}

.user-avator {
	width: 120px;
	height: 120px;
	border-radius: 50%;
}

.user-info-cont {
	padding-left: 50px;
	flex: 1;
	font-size: 14px;
	color: #999;
}

.user-info-cont div:first-child {
	font-size: 20px;
	color: #222;
	margin-bottom: 10px;
}
.orgname {
	margin-top: 10px;
}
.user-info-list {
	font-size: 14px;
	color: #999;
	line-height: 25px;
}

.user-info-list span {
	margin-left: 70px;
}

.mgb20 {
	margin-bottom: 20px;
}

.todo-item {
	font-size: 14px;
}

.todo-item-del {
	/* text-decoration: line-through; */
	color: #999;
}
.item_unread {
	color: rgb(242, 94, 67);
}
.item_read {
	/* color: rgb(100, 213, 114); */
	color: rgb(45, 140, 240);
}
</style>

<template>
	<div>
		<el-row :gutter="20">
			<el-col :span="8">
				<el-row>
					<el-col>
						<el-card shadow="hover" class="mgb20">
							<div class="user-info">
								<img src="static/image/head.png" class="user-avator" alt />
								<div class="user-info-cont">
									<div class="user-info-name">{{name}}</div>
									<div>{{role}}</div>
									<div class="orgname">所属机构：{{orgname}}</div>
								</div>
							</div>
							<div class="user-info-list">
								上次登录时间：
								<span>{{stateTime}}</span>
							</div>
							<!-- <div class="user-info-list">
								上次登录地点：
								<span>{{addr}}</span>
							</div>-->
						</el-card>
						<el-card shadow="hover">
							<div slot="header" class="clearfix">
								<span style="font-size:16px;">日历</span>
							</div>
							<!-- <el-progress :percentage="57.2" color="#42b983"></el-progress>JavaScript
							<el-progress :percentage="29.8" color="#f1e05a"></el-progress>CSS
							<el-progress :percentage="11.9"></el-progress>HTML
							<el-progress :percentage="1.1" color="#f56c6c"></el-progress>-->
							<el-calendar v-model="value"></el-calendar>
						</el-card>
					</el-col>
				</el-row>
			</el-col>
			<el-col :span="16">
				<el-row :gutter="20" class="mgb20">
					<el-col :span="8">
						<el-card shadow="hover" :body-style="{padding: '0px'}">
							<div class="grid-content grid-con-1">
								<i class="el-icon-view grid-con-icon"></i>
								<div class="grid-cont-right" style="border-right:1px solid #EBEEF5">
									<div style="margin-bottom: 8px;">
										<div class="grid-num num_left">{{newCount.appcou || 0}}</div>
										<div>应用上传总量</div>
									</div>
									<div>
										<div class="grid-num num_left">{{newCount.apptodaydcou || 0}}</div>
										<div>今日新增</div>
									</div>
								</div>
								<div class="grid-cont-right">
									<div style="margin-bottom: 8px;">
										<div class="grid-num num_left">{{newCount.appdowncou || 0}}</div>
										<div>应用下载总量</div>
									</div>
									<div>
										<div class="grid-num num_left">{{newCount.apptodaydowndcou || 0}}</div>
										<div>今日新增</div>
									</div>
								</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="8">
						<el-card shadow="hover" :body-style="{padding: '0px'}">
							<div class="grid-content grid-con-2">
								<i class="el-icon-message grid-con-icon"></i>
								<div class="grid-cont-right">
									<div class="grid-num">{{newCount.secou || 0}}</div>
									<div>SE总量</div>
								</div>
								<div class="grid-cont-right">
									<div class="grid-num">{{newCount.setodaycou || 0}}</div>
									<div>今日新增</div>
								</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="8">
						<el-card shadow="hover" :body-style="{padding: '0px'}">
							<div class="grid-content grid-con-3">
								<i class="el-icon-goods grid-con-icon"></i>
								<div class="grid-cont-right">
									<div class="grid-num">{{newCount.usercou || 0}}</div>
									<div>平台使用人数总量</div>
								</div>
								<div class="grid-cont-right">
									<div class="grid-num">{{newCount.usertodaycou || 0}}</div>
									<div>今日新增</div>
								</div>
							</div>
						</el-card>
					</el-col>
				</el-row>
				<el-card shadow="hover" :body-style="{ height: '621px'}">
					<div slot="header" class="clearfix">
						<span style="font-size:16px;">消息中心</span>
					</div>
					<el-table
						:data="todoList"
						:show-header="false"
						height="621"
						style="width: 100%;font-size:14px;"
					>
						<el-table-column type="index" label="序号" width="50"></el-table-column>
						<el-table-column width="70">
							<template slot-scope="scope">
								<div
									v-if="scope.row.status == '0'"
									class="todo-item item_unread"
									:class="{'todo-item-del': scope.row.status}"
								>未读</div>
								<div v-else class="todo-item item_read" :class="{'todo-item-del': scope.row.status}">已读</div>
							</template>
						</el-table-column>
						<el-table-column>
							<template slot-scope="scope">
								<div class="todo-item" :class="{'todo-item-del': scope.row.status}">{{scope.row.title}}</div>
							</template>
						</el-table-column>
						<el-table-column width="150">
							<template slot-scope="scope">
								<div class="todo-item" :class="{'todo-item-del': scope.row.status}">{{scope.row.mtime}}</div>
							</template>
						</el-table-column>
						<el-table-column width="40">
							<template slot-scope="scope">
								<!-- <i class="el-icon-edit" style="margin-right:15px"></i> -->
								<i class="el-icon-arrow-right" @click="toShenHe(scope.row)"></i>
							</template>
						</el-table-column>
					</el-table>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
// import shenheModel from "views/tsm/info/applet_updsh.vue";
export default {
	data() {
		return {
			value: new Date(),
			name: "",
			addr: "",
			role: "",
			orgname: "",
			stateTime: "",
			todoList: [],
			newCount: {}
		};
	},
	computed: {
		// role() {
		// 	console.log(this.$util.getLoginer());
		// 	return this.username === "admin" ? "超级管理员" : "普通用户";
		// }
	},
	activated() {
		this.name = this.$util.getLoginer().name;
		this.stateTime = this.$util.getLoginer().stateTime;
		this.addr = this.$util.getLoginer().addr;
		this.role = "";
		if (this.$util.getLoginer().roles.length > 0) {
			this.$util.getLoginer().roles.forEach(item => {
				this.role += item.rolename + " ";
			});
		}
		this.orgname = this.$util.getLoginer().extendValues.orgname;
		// this.loadNewcount();
		// this.loadMessages();
	},
	methods: {
		// 加载所有的上传下载用户数据
		loadNewcount() {
			// console.log( "ddddddddddd" ) ;
			// console.log( this.$util.getLoginer()) ;
			this.$axios
				.get(
					this.httpRoot.BASEURL_TSM +
						"rest/tsm/sys/home/newcount?loginsid=" +
						this.$util.getLoginer().sessionId,
					{}
				)
				.then(res => {
					if (res.data.result == "true") {
						if (JSON.stringify(res.data.resultData) != "{}") {
							this.newCount = res.data.resultData;
						}
					} else {
						this.$error(
							"查询失败" +
								res.data.resultMessage +
								",错误代码:" +
								res.data.resultCode
						);
					}
				})
				.catch(function(error) {});
		},
		// 加载所有的上传下载用户数据
		loadMessages() {
			this.$axios
				.get(
					this.httpRoot.BASEURL_TSM +
						"rest/tsm/sys/home/messages?loginsid=" +
						this.$util.getLoginer().sessionId,
					{}
				)
				.then(res => {
					if (res.data.result == "true") {
						if (res.data.resultData.length > 0) {
							this.todoList = res.data.resultData;
						}
					} else {
						this.$error(
							"查询失败" +
								res.data.resultMessage +
								",错误代码:" +
								res.data.resultCode
						);
					}
				})
				.catch(function(error) {});
		},
		//跳转到审核界面
		toShenHe(row) {
			if (row.status == "0") {
				//new
				if (row.objtype == "applet") {
					if (row.objact == "tosh") {
						//页面参数
						var pageParam = {
							actType: "upd",
							seleid: row.objid
						};
						// this.toShowDetail("应用审核", shenheModel, pageParam, 900, 610);
						//
						this.toRead(row);
					}
				}
			}
		},
		toRead(row) {
			var pageP = {
				loginsid: this.$util.getLoginer().sessionId,
				id: row.id
			};
			// alert(row.id);
			var url = this.httpRoot.BASEURL_TSM + "rest/tsm/sys/notic/readsave";
			this.$axios
				.post(url, pageP)
				.then(res => {
					// 关闭提交表单的loading
					this.fullscreenLoading = false;
					if (res.data.result == "true") {
						this.loadMessages();
					} else {
					}
				})
				.catch(function(error) {
					this.fullscreenLoading = false;
				});
		},

		//详细窗口弹出
		toShowDetail(title, detailModel, dialogParams, w, h) {
			let commDialog = this.$dialog.commDialog(
				title,
				detailModel,
				dialogParams,
				w + "px",
				h + "px"
			);
			commDialog.exec.then(resp => {
				if (resp.type == "ok") {
					this.loadMessages();
				} else if (resp.type == "cancel") {
				}
			});
		}
	}
};
</script>

